<!DOCTYPE html>
<html lang="en-us">
<head><head>
    <meta name="referrer" content="no-referrer"/>
    <meta name="google-site-verification" content="9vIieCe-Qpd78QOmBl63rGtIVbhY6sYyuxX3j8XWBA4" />
    <meta name="baidu-site-verification" content="LRrmH41lz7" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="google-site-verification" content="xBT4GhYoi5qRD5tr338pgPM5OWHHIDR6mNg1a3euekI" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <meta name="description" content="restful架构的设计思想与最佳实践">
    
    <meta name="keyword"  content="暴走的初号机, shinji3887, 暴走的初号机的网络日志, 暴走的初号机的博客, shinji3887 Blog, 博客, 个人网站, 互联网, Web, 云原生, PaaS, Istio, Kubernetes, 微服务, Microservice">
    <link rel="shortcut icon" href="/img/favicon.ico">

    <title>浅淡RESTful api设计规范-同步率400%</title>

    <link rel="canonical" href="/post/restful-api-design/">

    <link rel="stylesheet" href="https://lupeier.cn-sh2.ufileos.com/iDisqus.min.css"/>
	
    
    <link rel="stylesheet" href="https://lupeier.cn-sh2.ufileos.com/bootstrap.min.css">

    
    <link rel="stylesheet" href="https://lupeier.cn-sh2.ufileos.com/hux-blog.min.css">

    
    <link rel="stylesheet" href="https://lupeier.cn-sh2.ufileos.com/syntax.css">

    
    <link rel="stylesheet" href="https://lupeier.cn-sh2.ufileos.com/zanshang.css">

    
    <link href="/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    
    
    <script src="https://lupeier.cn-sh2.ufileos.com/jquery.min.js"></script>
    
    
    <script src="https://lupeier.cn-sh2.ufileos.com/bootstrap.min.js"></script>
    
    
    <script src="https://lupeier.cn-sh2.ufileos.com/hux-blog.min.js"></script>
</head>
</head>

<nav class="navbar navbar-default navbar-custom navbar-fixed-top">
    <div class="container-fluid">
        
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">L&#39;s Blog</a>
        </div>

        
        
        <div id="huxblog_navbar">
            <div class="navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="/">Home</a>
                    </li>
                    
                    <li>
                        <a href="categories/tech">tech</a>
                    </li>
                    
                    <li>
                        <a href="categories/tips">tips</a>
                    </li>
                    
                    <li>
                        <a href="/about">About</a>
                    </li>
                    
                </ul>
            </div>
        </div>
        
    </div>
    
</nav>
<script>
    
    
    
    var $body   = document.body;
    var $toggle = document.querySelector('.navbar-toggle');
    var $navbar = document.querySelector('#huxblog_navbar');
    var $collapse = document.querySelector('.navbar-collapse');

    $toggle.addEventListener('click', handleMagic)
    function handleMagic(e){
        if ($navbar.className.indexOf('in') > 0) {
        
            $navbar.className = " ";
            
            setTimeout(function(){
                
                if($navbar.className.indexOf('in') < 0) {
                    $collapse.style.height = "0px"
                }
            },400)
        }else{
        
            $collapse.style.height = "auto"
            $navbar.className += " in";
        }
    }
</script>




<style type="text/css">
    header.intro-header{
        background-image: url('https://lupeier.cn-sh2.ufileos.com/abstract-expressionism-abstract-painting-acrylic-1509534.jpg')
    }
</style>
<header class="intro-header" >
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <div class="post-heading">
                    <div class="tags">
                       
                       <a class="tag" href="/tags/microservice" title="Microservice">
                           Microservice
                        </a>
                        
                       <a class="tag" href="/tags/restful" title="RESTful">
                           RESTful
                        </a>
                        
                    </div>
                    <h1>浅淡RESTful api设计规范</h1>
                    <h2 class="subheading"></h2>
                    <span  class="meta">Posted by L&#39; on Thursday, November 29, 2018
                        
                    </span>
					<br>
                </div>
            </div>
        </div>
    </div>
</header>




<article>
    <div class="container">
        <div class="row">

            
            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                post-container">

        		
                        <header>
                        <h2>TOC</h2>
                        </header>
                        <nav id="TableOfContents"></nav>
        		
        		<blockquote>
<p>目前主流的通讯协议主要有RPC、http/1.1、http/2等，而http中最主流的无疑就是restful了，由于工作的原因，经常需要和不同的外部服务商进行系统集成，给出的文档都说是基于restful规范设计，遗憾的是，在我看来，几乎没有看到过真正可以称之为restful架构的api设计。今天就来谈谈如何设计一个规范、优雅、可读性高的restful api</p>
</blockquote>
<p>restful其实本身并不是一个新鲜的东西，最早是在2000年由<a href="http://en.wikipedia.org/wiki/Roy_Fielding">Roy Thomas Fielding</a>博士在他的<a href="http://www.ics.uci.edu/~fielding/pubs/dissertation/top.htm">博士论文</a>中提出。说起这位老兄，来头可不小，他是http 1.0和1.1版本协议的主要设计者，apache基金会的第一任主席，可以说是现代互联网体系的奠基者。Fielding将他对互联网软件的架构原则，定名为REST，即表述层状态转移（Representational State Transfer）。这是一套在互联网体系下，调用者如何与被调用者（资源实体）进行互动的规范设计。
<img src="https://lupeier.cn-sh2.ufileos.com/rest.jpeg" alt="rest.jpeg"></p>
<p>当时的互联网其实还是处于刚萌芽的状态，这个设计思想过于超前，所以早些年一直处于不温不火的状态。直到近年来，互联网业务高速发展，系统架构越来越复杂，移动互联网的兴起，前后端分离架构的流行，人们发现原来这套用于超文本传输的协议是如此适合用于设计基于互联网的api接口，基于http动词以及标准的http status返回信息，能够非常好的描述api的特性，并且可读性非常好。更重要的是，由于http是事实上的互联网通讯标准协议，基于rest设计的api接口，就好像你出国用英语和别人交流，完全不存在沟通障碍。</p>
<p>关于restful设计的最佳实践，这里还是推荐阮一峰老师的<a href="http://www.ruanyifeng.com/blog/2014/05/restful_api.html">RESTful API 设计指南</a>，个人觉得是国内范围里讲的最好的了。rest架构，从个人角度理解，核心做了两件事情</p>
<ul>
<li>资源定位</li>
<li>资源操作</li>
</ul>
<p>其实从REST的定义中就能看出来，表述层对应的就是描述资源的位置（资源定位），状态转移就是对资源的状态进行变更操作（增删改查）
下面举个实际的例子：
假设我们数据库里有一张User表，我们根据表建好了领域对象模型User，按照restful规范设计的接口应该是这样的：</p>
<ul>
<li>新增用户</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">POST /users
</code></pre></div><ul>
<li>修改用户</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">PUT /users/id
</code></pre></div><ul>
<li>删除用户</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">DELETE /users/id
</code></pre></div><ul>
<li>查找全部用户</li>
</ul>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">GET /users
</code></pre></div><p>看到这里可能有同学就要问了，干嘛非得这么设计，还要用什么http动词，delete、put神马的我都没用过，平时都是get、post走天下，也用的好好的呀。新增用户不能用<code>/addUser</code>吗？删除用户不能用<code>/deleteUser</code>吗？感觉也很清楚啊（事实上很多公司的所谓的restful接口文档都是这么定义的）
好，现在让我们回到前面，复习一下rest的定义，第一条叫做<strong>资源定位</strong>，如果还不理解，那让我们再想想URL的定义，叫做<strong>统一资源定位符</strong>，也就是说url是用来表示资源在互联网上的位置的，所以说在url中不应该包含动词，只能包含名词，对资源的操作应该体现在http method上面。</p>
<p>为了便于理解，这里我们再做一个假设，jane的网站上有一张小汽车的图片，地址是<code>http://jane.com/img/car.jpg</code>,现在jane想设计一个api接口，实现对这张图片的删除操作，这个api应该怎么设计？根据rest的设计规范，很容易得出是</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">DELETE http://jane.com/img/car
</code></pre></div><p>非常的清晰明了（这里暂时先不考虑调用方是否有权限删除服务器上的资源）
注意这里为了讲述原理没有加资源的后缀.jpg，引用阮一峰老师的话</p>
<blockquote>
<p>严格地说，有些网址最后的&quot;.html&quot;后缀名是不必要的，因为这个后缀名表示格式，属于&quot;表现层&quot;范畴，而URI应该只代表&quot;资源&quot;的位置。它的具体表现形式，应该在HTTP请求的头信息中用Accept和Content-Type字段指定，这两个字段才是对&quot;表现层&quot;的描述。</p>
</blockquote>
<p>在这个例子里，我们可以通过在http header里指定content-type为<code>image/jpeg</code>来申明这个资源是一张jpg格式的图片
接下来，如果要查询（获取）这张图片呢？自然就是</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">GET http://jane.com/img/car
</code></pre></div><p>再进一步，我们再改造一下这个api，加上.jpg后缀，这个api就变成了</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">GET http://jane.com/img/car.jpg
</code></pre></div><p>看到这里大家应该都很熟悉了，这就是我们每天上网要进行无数次操作的api，就是这么设计出来的</p>
<p>我们继续扩展一下，现在我们要获取的不是静态图片资源了，而是一辆小汽车的相关信息，并且需要对车库里的汽车进行增删改查的维护操作。如果用上面讲的那种一般http的写法，可能会写出类似下面这样的api（只用GET和POST方法）</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">POST http://jane.com/garage/addCar

<span style="color:#f92672">{</span><span style="color:#e6db74">&#34;brand&#34;</span>:<span style="color:#e6db74">&#34;ford&#34;</span>,<span style="color:#e6db74">&#34;model&#34;</span>:<span style="color:#e6db74">&#34;focus&#34;</span>,<span style="color:#e6db74">&#34;price&#34;</span>:<span style="color:#e6db74">&#34;120000&#34;</span><span style="color:#f92672">}</span>

POST http://jane.com/garage/udpateCar?id<span style="color:#f92672">=</span><span style="color:#ae81ff">123</span>

<span style="color:#f92672">{</span><span style="color:#e6db74">&#34;brand&#34;</span>:<span style="color:#e6db74">&#34;ford&#34;</span>,<span style="color:#e6db74">&#34;model&#34;</span>:<span style="color:#e6db74">&#34;focus&#34;</span>,<span style="color:#e6db74">&#34;price&#34;</span>:<span style="color:#e6db74">&#34;130000&#34;</span><span style="color:#f92672">}</span>

GET http://jane.com/garage/queryCarList

GET http://jane.com/garage/queryCarSingle?id<span style="color:#f92672">=</span><span style="color:#ae81ff">123</span>

GET http://jane.com/garage/deleteCar?id<span style="color:#f92672">=</span><span style="color:#ae81ff">123</span>
</code></pre></div><p>看出问题来了吗？一个严重的问题是<strong>url丢失了资源的位置</strong>，更重要的是，你可以叫<code>deleteCar</code>，也可以叫<code>eraseCar</code>，还可以叫<code>removeCar</code>，具体什么含义只有设计这个api的人才能说清楚。而如果用http method，那就肯定是<code>DELETE</code>这个方法,所有看这个api的人都知道你提供的是一个删除这个资源的方法，这就叫做<strong>语义化</strong>，能用最少的话把一个意思表达清楚，这本身就是一种优雅的设计方式。使用rest设计上述api，结果如下</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">POST http://jane.com/garage/cars

<span style="color:#f92672">{</span><span style="color:#e6db74">&#34;brand&#34;</span>:<span style="color:#e6db74">&#34;ford&#34;</span>,<span style="color:#e6db74">&#34;model&#34;</span>:<span style="color:#e6db74">&#34;focus&#34;</span>,<span style="color:#e6db74">&#34;price&#34;</span>:<span style="color:#e6db74">&#34;120000&#34;</span><span style="color:#f92672">}</span>

PUT http://jane.com/garage/cars/123

<span style="color:#f92672">{</span><span style="color:#e6db74">&#34;brand&#34;</span>:<span style="color:#e6db74">&#34;ford&#34;</span>,<span style="color:#e6db74">&#34;model&#34;</span>:<span style="color:#e6db74">&#34;focus&#34;</span>,<span style="color:#e6db74">&#34;price&#34;</span>:<span style="color:#e6db74">&#34;130000&#34;</span><span style="color:#f92672">}</span>

GET http://jane.com/garage/cars

GET http://jane.com/garage/cars/123

DELETE http://jane.com/garage/cars/123
</code></pre></div><p>这里<code>http://jane.com/garage/cars/123</code>代表了id为123的这辆小汽车在网上的唯一位置，本质上和<code>http://jane.com/img/car</code>所代表的含义是一样的。
使用rest能带来的额外的好处，是你可以做很方便的权限控制。因为<code>POST</code>、<code>PUT</code>、<code>DELETE</code>、<code>GET</code>等都是标准的http方法，你可以很轻松的在nginx这样的7层代理或者防火墙上设置策略，禁止某些资源的修改及删除操作，而这显然是自定义的url所达不到的。
除了<code>HTTP METHOD</code>,rest另外一套重要的规范就是<code>HTTP STATUS</code>，这套状态码规范定义了常规的api操作所可能产生的各种可能结果的描述，遵循这套规范，会使得你的api变得更加可读，同时也便于各种网络、基础设施进行交易状态监控。经常会用到的status code整理如下：</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash"><span style="color:#ae81ff">200</span> OK - <span style="color:#f92672">[</span>GET<span style="color:#f92672">]</span>：服务器成功返回用户请求的数据，该操作是幂等的（Idempotent）。
<span style="color:#ae81ff">201</span> CREATED - <span style="color:#f92672">[</span>POST/PUT/PATCH<span style="color:#f92672">]</span>：用户新建或修改数据成功。
<span style="color:#ae81ff">202</span> Accepted - <span style="color:#f92672">[</span>*<span style="color:#f92672">]</span>：表示一个请求已经进入后台排队（异步任务）
<span style="color:#ae81ff">204</span> NO CONTENT - <span style="color:#f92672">[</span>DELETE<span style="color:#f92672">]</span>：用户删除数据成功。
<span style="color:#ae81ff">400</span> INVALID REQUEST - <span style="color:#f92672">[</span>POST/PUT/PATCH<span style="color:#f92672">]</span>：用户发出的请求有错误，服务器没有进行新建或修改数据的操作，该操作是幂等的。
<span style="color:#ae81ff">401</span> Unauthorized - <span style="color:#f92672">[</span>*<span style="color:#f92672">]</span>：表示用户没有权限（令牌、用户名、密码错误）。
<span style="color:#ae81ff">403</span> Forbidden - <span style="color:#f92672">[</span>*<span style="color:#f92672">]</span> 表示用户得到授权（与401错误相对），但是访问是被禁止的。
<span style="color:#ae81ff">404</span> NOT FOUND - <span style="color:#f92672">[</span>*<span style="color:#f92672">]</span>：用户发出的请求针对的是不存在的记录，服务器没有进行操作，该操作是幂等的。
<span style="color:#ae81ff">406</span> Not Acceptable - <span style="color:#f92672">[</span>GET<span style="color:#f92672">]</span>：用户请求的格式不可得（比如用户请求JSON格式，但是只有XML格式）。
<span style="color:#ae81ff">410</span> Gone -<span style="color:#f92672">[</span>GET<span style="color:#f92672">]</span>：用户请求的资源被永久删除，且不会再得到的。
<span style="color:#ae81ff">422</span> Unprocesable entity - <span style="color:#f92672">[</span>POST/PUT/PATCH<span style="color:#f92672">]</span> 当创建一个对象时，发生一个验证错误。
<span style="color:#ae81ff">500</span> INTERNAL SERVER ERROR - <span style="color:#f92672">[</span>*<span style="color:#f92672">]</span>：服务器发生错误，用户将无法判断发出的请求是否成功。
</code></pre></div><p>事情到了这里似乎一切都很美好，可惜人生不如意十之八九，api设计也不可能一帆风顺。总有一些场景是CRUD所抽象不了的，举个简单的例子，用户登陆，如何去匹配CRUD模型？这里我的建议是，先把你的操作对象或者行为抽象为资源，然后就简单了，无非就是对这个资源的CRUD。
针对用户登陆这个场景，我们可以把用户在远程服务器的会话信息抽象为一个资源，这样的话，登陆其实就是在远程服务器增加了一个会话资源，不难想到，登出就是在远程服务器删除了一个会话资源，所以api可以这样设计</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">POST /login
DELETE /logout
</code></pre></div><p>如果是发送短信呢？似乎更难。。。这里再次请出阮一峰老师</p>
<blockquote>
<p>如果某些动作是HTTP动词表示不了的，你就应该把动作做成一种资源。比如网上汇款，从账户1向账户2汇款500元，正确的写法是把动词transfer改成名词transaction，资源不能是动词，但是可以是一种服务</p>
</blockquote>
<p>这样的话你把发送短信理解成一种服务，api可以这样设计</p>
<div class="highlight"><pre style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4"><code class="language-bash" data-lang="bash">POST  /smsService

<span style="color:#f92672">{</span><span style="color:#e6db74">&#34;mobile&#34;</span>:<span style="color:#e6db74">&#34;13813888888&#34;</span>,<span style="color:#e6db74">&#34;text&#34;</span>:<span style="color:#e6db74">&#34;hello world&#34;</span><span style="color:#f92672">}</span>
</code></pre></div><p>最后建议大家去看一下github的<a href="https://developer.github.com/v3/">api文档</a>，可以说是restful架构最完整的实现了，看完后一定会对restful规范有着更深入的理解。</p>

        
                
        
              <hr>
              <ul class="pager">
                  
                  <li class="previous">
                      <a href="/post/github-flow-practice/" data-toggle="tooltip" data-placement="top" title="Git的代码分支策略实践">&larr; Previous Post</a>
                  </li>
                  
                  
                  <li class="next">
                      <a href="/post/protobuf-introduce-and-test/" data-toggle="tooltip" data-placement="top" title="protobuf协议介绍及性能实测">Next Post &rarr;</a>
                  </li>
                  
              </ul>
  
              

<div id="gitalk-container"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script src="/js/md5.min.js"></script>
<script>
	const gitalk = new Gitalk({
	  clientID: 'aff2580d8cc58af83367',
	  clientSecret: '747547f5f87fcc5145b847ab76a498d7e501319f',
	  repo: 'comment',
	  owner: 'shinji3887',
	  admin: ['shinji3887'],
	  id: md5(location.pathname),      
	  distractionFreeMode: false  
	})

	gitalk.render('gitalk-container')
</script>


            </div>
            
            <div class="
                col-lg-8 col-lg-offset-2
                col-md-10 col-md-offset-1
                sidebar-container">

                
                <section>
                    <hr class="hidden-sm hidden-xs">
                    <h5><a href="/tags/">FEATURED TAGS</a></h5>
                    <div class="tags">
                     
                    
                        
                            <a href="/tags/api-gateway" title="api-gateway">
                                api-gateway
                            </a>
                        
                    
                        
                    
                        
                            <a href="/tags/cloud-native" title="cloud-native">
                                cloud-native
                            </a>
                        
                    
                        
                            <a href="/tags/devops" title="devops">
                                devops
                            </a>
                        
                    
                        
                            <a href="/tags/docker" title="docker">
                                docker
                            </a>
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                            <a href="/tags/istio" title="istio">
                                istio
                            </a>
                        
                    
                        
                    
                        
                            <a href="/tags/kubernetes" title="kubernetes">
                                kubernetes
                            </a>
                        
                    
                        
                            <a href="/tags/microservice" title="microservice">
                                microservice
                            </a>
                        
                    
                        
                    
                        
                    
                        
                    
                        
                    
                        
                            <a href="/tags/restful" title="restful">
                                restful
                            </a>
                        
                    
                        
                    
                        
                            <a href="/tags/servicemesh" title="servicemesh">
                                servicemesh
                            </a>
                        
                    
                        
                            <a href="/tags/spring-cloud" title="spring-cloud">
                                spring-cloud
                            </a>
                        
                    
                        
                            <a href="/tags/vue" title="vue">
                                vue
                            </a>
                        
                    
                        
                    
                        
                    
                    </div>
                </section>

                
                <hr>
                <h5>FRIENDS</h5>
                <ul class="list-inline">
                    
                        <li><a target="_blank" href="https://skyao.io/">小剑的博客</a></li>
                    
                        <li><a target="_blank" href="https://zhaohuabing.com/">huabing的博客</a></li>
                    
                        <li><a target="_blank" href="http://blog.didispace.com/">程序猿DD的博客</a></li>
                    
                </ul>
            </div>
        </div>
    </div>
</article>




<footer>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                <ul class="list-inline text-center">
                   
                   <li>
                       <a href="" rel="alternate" type="application/rss+xml" title="L&#39;s Blog" >
                           <span class="fa-stack fa-lg">
                               <i class="fa fa-circle fa-stack-2x"></i>
                               <i class="fa fa-rss fa-stack-1x fa-inverse"></i>
                           </span>
                       </a>
                   </li>
                   
                    
                    <li>
                        <a href="mailto:18016380795@163.com">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-envelope fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
		    
                    
                    
                    
                    

                    

		    
                    
                    <li>
                        <a target="_blank" href="/link%20of%20wechat%20QR%20code%20image">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-wechat fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
		    
                    
                    <li>
                        <a target="_blank" href="https://github.com/shinji3887">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-github fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
		    
                    
                    <li>
                        <a target="_blank" href="https://www.linkedin.com/in/lupeier">
                            <span class="fa-stack fa-lg">
                                <i class="fa fa-circle fa-stack-2x"></i>
                                <i class="fa fa-linkedin fa-stack-1x fa-inverse"></i>
                            </span>
                        </a>
                    </li>
		    
                </ul>
		<p class="copyright text-muted">
                    Copyright &copy; L&#39;s Blog , 2018
                    <br>
                    <br>
                    <a href="http://icp.chinaz.com/info?q=lupeier.com" target="_blank">备案号：沪ICP备19022667号-1</a>                    
                </p>
            </div>
        </div>
    </div>
</footer>



<script>
    function async(u, c) {
      var d = document, t = 'script',
          o = d.createElement(t),
          s = d.getElementsByTagName(t)[0];
      o.src = u;
      if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
      s.parentNode.insertBefore(o, s);
    }
</script>






<script>
    
    if($('#tag_cloud').length !== 0){
        async("/js/jquery.tagcloud.js",function(){
            $.fn.tagcloud.defaults = {
                
                color: {start: '#bbbbee', end: '#0085a1'},
            };
            $('#tag_cloud a').tagcloud();
        })
    }
</script>


<script>
    async("/js/fastclick.js", function(){
        var $nav = document.querySelector("nav");
        if($nav) FastClick.attach($nav);
    })
</script>


<script>
    (function(){
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https'){
       bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
      }
      else{
      bp.src = 'http://push.zhanzhang.baidu.com/push.js';
      }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>







</body>
</html>
